<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="Keywords" content="">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #ddd;
        }
        .search{
            height: 45px;
            background-color: #0a0;
        }
        .banner{
            height: 75px;
            background-color:blue;
        }
        nav {
            padding: 10px 6px;
            background-color: #fff;
            border-radius: 10px;
        }
        ul{
            list-style:none;
            /*只要设置了这个属性和值，就是在当前位置开启了弹性布局*/
            display: flex;
        }
        li{
            width: 20%;
            height: 50px;
            box-sizing: border-box;
        }
        a{
            display: flex;
            font-size: 10px;
            flex-direction: column;
            color: #000;
            text-decoration: none;
            border:1px solid red;
            align-items: center;
        }
        span:nth-child(1){
            width: 32px;
            height: 32px;
            background-image: url('./images/flex-nav.png');
            background-size: 100%;
        }
    </style>
</head>
<body>
    <div class="search"></div>
    <div class="banner"></div>
    <nav>
        <ul>
            <li><a href="javascript:;"><span></span><span>景点-玩乐</span></a></li>
            <li><a href="javascript:;"><span></span><span>周边游</span></a></li>
            <li>
                <a href="javascript:;">
                    <span></span>
                    <span>景点-玩乐</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span></span>
                    <span>周边游</span>
                </a>
            </li><li>
                <a href="javascript:;">
                    <span></span>
                    <span>景点-玩乐</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span></span>
                    <span>周边游</span>
                </a>
            </li>
        </ul>
    </nav>
</body>
</html>
<script src=""></script>